<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base/layout.html">


<!-- start: Content -->
<div layout:fragment="content" class="main ">

    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="index.html">主页</a></li>
                <li><i class="fa fa-list-alt"></i><a href="#">教师管理</a></li>
                <li><i class="fa fa-indent"></i>修改教师信息</li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-indent red"></i><strong>修改教师信息</strong></h2>
                </div>
                <div class="panel-body">
                    <form id="modularForm" action="" method="post" enctype="multipart/form-data"
                          class="form-horizontal ">
                        <input type="hidden" name="id" th:value="${teacher.id}"/>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="text-input">姓名</label>
                            <div class="col-md-9">
                                <input type="text" name="name" class="form-control" th:value="${teacher.name}">
                                <span class="help-block">请输入姓名</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="text-input">职业</label>
                            <div class="col-md-9">
                                <select id="majorInfo" name="major" class="form-control" size="1">
                                </select>
                                <span class="help-block">请输入职业</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="text-input">联系电话</label>
                            <div class="col-md-9">
                                <input type="text" name="phoneNum" class="form-control" th:value="${teacher.phoneNum}">
                                <span class="help-block">请输入电话</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="text-input">附件</label>
                            <div id="uploadFileDiv" class="col-md-2">
                                <a th:href="@{downloadFile(fileName=${teacher.utilFilePath},fileNameSrc=${teacher.fileNameSrc})}"
                                   th:text="${teacher.fileNameSrc}"> </a>
                            </div>
                            <span id="delDiv" class="col-md-1">
                                    <button id="delBtn" type="button" class="btn btn-sm btn-danger"
                                            onclick="delUploadFile()">删除</button>
                                </span>
                        </div>
                        <br>
                        <div class="panel-footer">
                            <button id="submitBtn" type="submit" class="btn btn-sm btn-success"><i
                                    class="fa fa-dot-circle-o"></i> 保存
                            </button>
                            <button type="button" class="btn btn-sm btn-success" onclick="history.back()"><i
                                    class="fa fa-dot-circle-o"></i> 返回
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div><!--/.row-->
        <script>
            //当页面初始化的时候，首次加载的函数
            $(document).ready(function () {
                //你想加载哪个函数，你就写在这个里面就可以
                initMajorInfo();
            });

            //加载职业的下拉框内容，用AJAX技术去实现的
            function initMajorInfo() {
                //获取页面查询条件
                let major = "[[${teacher.major}]]";
                //往select下拉框去追加内容
                $('#majorInfo').append("<option value=-1> 请选择 </option>");
                $.ajax({
                    url: '../major/selectMajor',
                    type: 'get',
                    datatype: 'json',
                    data: {},
                    success: function (data) {
                        //访问成功以后，执行这里面的内容
                        for (let i in data) {
                            if (major == data[i].id) {
                                $('#majorInfo').append("<option value=" + data[i].id + " selected> " + data[i].name + " </option>")

                            } else {
                                $('#majorInfo').append("<option value=" + data[i].id + "> " + data[i].name + " </option>")

                            }
                        }
                    }
                })
            }

            function delUploadFile() {
                //删除当前附件
                $("#uploadFileDiv").html("<input type='file' name='utilFile' multiple>");
                $("#delDiv").remove();
            }

            $('#modularForm').submit(function () {
                $('#modularForm').ajaxSubmit({
                    url: 'update',
                    type: 'post',
                    success: function (data) {
                        layer.msg("修改成功");
                        setTimeout(function () {
                            window.location = ("teacher")
                        }, 1500);
                    }
                })
                return false;
            });
        </script>
    </div>
    <!-- end: Content -->
</div>